import React from 'react';

// index 组件
class Index extends React.Component<any> {
  form: Form | null = null;
  button: HTMLButtonElement | null = null;

  componentDidMount() {
    const { forwardRef } = this.props;
    forwardRef.current = {
      form: this.form, // 给form组件实例 ，绑定给 ref form属性
      index: this, // 给index组件实例 ，绑定给 ref index属性
      button: this.button, // 给button dom 元素，绑定给 ref button属性
    };
  }

  render() {
    return (
      <div>
        <button ref={(button) => (this.button = button)}>点击</button>
        <Form ref={(form) => (this.form = form)} />
      </div>
    );
  }
}

// 表单组件
class Form extends React.Component {
  render() {
    return <div>form</div>;
  }
}

const ForwardRefIndex = React.forwardRef((props, ref) => <Index {...props} forwardRef={ref} />);

// home 组件
export default function Home() {
  const ref = React.useRef(null);

  React.useEffect(() => {
    console.log(ref.current);
  }, []);
  // return <ForwardRefIndex ref={ref} />;

  // 一般是 Home像 Index 传递 props属性
  // 通过修改 current可以通过 Home给Index增加一些属性
  // 不推荐这么玩。 react是单向数据流的
  return <Index forwardRef={ref} />;
}
